<template>
    <div class="box">
        <el-button-group>
            <el-button :type="activeName=='list' ? 'primary': ''" @click="activeName='list'">广告图管理</el-button>
            <el-button :type="activeName=='add' ? 'primary': ''" @click="activeName='add'">添加广告图</el-button>
        </el-button-group>
        <el-card shadow="always" :body-style="{ padding: '20px' }" v-if="activeName=='list'">
            <div slot="header">
                <el-form :model="form" ref="form" label-width="80px" :inline="true" size="normal">
                    <el-form-item label="广告位">
                        <el-select v-model="form.posid" placeholder="请选择广告位">
                            <el-option
                                v-for="item in advList"
                                :key="item.id"
                                :label="item.advposname "
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关键字">
                        <el-input v-model="form.keys" placeholder="关键字"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getAdvimgList()">查询</el-button>
                        <el-button>重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="advimgList" border stripe>
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="id" label="ID编号"></el-table-column>
                <el-table-column prop="advposname" label="广告位置"></el-table-column>
                <el-table-column label="广告图">
                    <template slot-scope="scope">
                        <el-image v-if="!scope.row.advimgsrc" :src="scope.row.advimgsrc"></el-image>
                        <el-image :src="scope.row.advimgsrc" v-else fit="contain">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="advimgdesc" label="广告位描述"></el-table-column>
                <el-table-column prop="advimglink" label="广告链接"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            circle
                            @click="edit(scope.row)"
                        ></el-button>
                        <el-button
                            type="danger"
                            icon="el-icon-delete"
                            circle
                            @click="del(scope.row.id)"
                        ></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
                layout="total, sizes, prev, pager, next"
                :total="total"
                :page-sizes="[10,20,30]"
                @current-change="pageChange"
                @size-change="sizeChange"
            ></el-pagination>
        </el-card>
        <el-card shadow="always" :body-style="{ padding: '20px' }" v-else>
            <el-row :gutter="20">
                <el-col :span="12" :offset="5">
                    <el-form :model="addForm" label-width="100px" :inline="false" size="normal">
                        <el-form-item label="广告图位置">
                            <el-select v-model="addForm.advimgpos" placeholder="请选择">
                                <el-option
                                    v-for="item in advList"
                                    :key="item.id"
                                    :label="item.advposname"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="广告图描述" size="normal">
                            <el-input
                                v-model="addForm.advimgdesc"
                                placeholder="请输入描述"
                                size="normal"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="广告图链接" size="normal">
                            <el-input v-model="addForm.advimglink" placeholder="链接地址" size="normal"></el-input>
                        </el-form-item>
                        <el-form-item label="广告图" size="normal">
                            <el-upload
                                class="upload-demo"
                                action="api/upload"
                                :on-success="handleSuccess"
                                list-type="picture"
                                name="img"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="addSubmit">立即创建</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
        <!-- 修改的弹框 -->
        <el-dialog title="修改广告图信息" :visible.sync="dialogShow" width="30%">
            <el-form :model="addForm" label-width="100px" :inline="false" size="normal">
                <el-form-item label="广告图位置">
                    <el-select v-model="editForm.advposname" placeholder="请选择">
                        <el-option
                            v-for="item in advList"
                            :key="item.id"
                            :label="item.advposname"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="广告图描述" size="normal">
                    <el-input v-model="editForm.advimgdesc" placeholder="请输入描述" size="normal"></el-input>
                </el-form-item>
                <el-form-item label="广告图链接" size="normal">
                    <el-input v-model="editForm.advimglink" placeholder="链接地址" size="normal"></el-input>
                </el-form-item>
                <el-form-item label="广告图" size="normal">
                    <el-upload
                        class="upload-demo"
                        action="api/upload"
                        :on-success="editHandleSuccess"
                        list-type="picture"
                        name="img"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click=" dialogShow= false">取消</el-button>
                <el-button type="primary" @click="editSubmit">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
let defaultAddForm = {
    act: "add",
    advimgpos: "",
    advimgdesc: "",
    advimglink: "",
    advimgsrc: "",
};
export default {
    data() {
        return {
            form: {
                act: "getlist",
                keys: "",
                posid: "",
                start: 1,
                pagesize: 10,
            },
            activeName: "list",
            advimgList: [],
            total: 0,
            addForm: {
                ...defaultAddForm,
            },
            dialogShow: false,
            editForm: {},
        };
    },
    computed: {
        ...mapState(["advList"]),
    },
    methods: {
        ...mapActions(["getAdvList"]),
        // 页码发生变化
        pageChange(val) {
            this.form.start = val;
            this.getAdvimgList();
        },
        // 每页数量变化
        sizeChange(val) {
            this.form.start = 1;
            this.form.pagesize = val;
            this.getAdvimgList();
        },
        // 上传成功的事件
        handleSuccess(file) {
            console.log(file);
            this.addForm.advimgsrc = file.data[0].path;
        },
        // 修改
        edit(row) {
            console.log(row);
            this.editForm = {
                ...row,
            };
            this.dialogShow = true;
        },
        // 修改提交
        async editSubmit() {
            this.editForm = Object.assign({ act: "edit" }, this.editForm);
            let { data: res } = await this.$axios.post(
                "api/advimg",
                this.editForm
            );
            if (res.code !== 200) return this.$message.error(res.msg);
            this.$message.success("修改成功");
            this.getAdvimgList();
            this.dialogShow = false;
        },
        // 修改上传
        editHandleSuccess(file) {
            console.log(file);
            this.editForm.advimgsrc = file.data[0].path;
        },

        // 添加提交
        async addSubmit() {
            let { data: res } = await this.$axios.post(
                "api/advimg",
                this.addForm
            );
            if (res.code !== 200) return this.$message.error(res.msg);
            this.$message.success("添加成功");
            this.addForm = {
                ...defaultAddForm,
            };
            this.getAdvimgList();
        },
        async getAdvimgList() {
            let { data: res } = await this.$axios.get("api/advimg", {
                params: this.form,
            });
            if (res.code !== 200) return this.$message.error(res.msg);
            this.advimgList = res.data;
            this.total = res.allNum;
        },
        // 删除事件
        async del(id) {
            try {
                await this.$confirm("您确定要删除此广告图吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                });
                let { data: res } = await this.$axios.get("api/advimg", {
                    params: {
                        id: id,
                        act: "del",
                    },
                });

                if (res.code !== 200) return this.$message.error(res.msg);
                if (this.form.start !== 1 && this.advimgList.length == 1) {
                    this.form.start--;
                }
                this.getAdvimgList();
            } catch (error) {
                this.$message.error("取消删除");
            }
        },
    },
    mounted() {
        this.advList.length || this.getAdvList();
        this.getAdvimgList();
    },
};
</script>
<style scoped>
.box {
    text-align: left;
}
.el-card {
    margin-top: 20px;
}
</style>
